<template>
    <div>
       <div>
            <el-form>
                {{ regularText }}
                <br />
                <!-- <el-input class="regular-text" :class="[regularTextType]" v-model="regularText"></el-input> -->
                <el-button @click="changeRegularText">{{ regularTextType === 'password' ? '显示' : '掩码' }}</el-button>
                <!-- userID -->
                <div v-if="isShowUserId">
                    <el-input v-model="userId" :id="`${new Date().getTime()}`" name="95664656" :autocomplete="`${new Date().getTime()}`"/>
                </div>
                <!-- <div style="opacity: 0; height: 0;"> -->
                <div>
                    <!-- text password -->
                    <!-- <div v-if="isShowTextPassword">
                        <el-input type="text" v-model="textPassword"/>
                    </div> -->
                    <!-- password -->
                    <!-- <div v-if="isShowPassword">
                        <el-input type="password" v-model="password"/>
                    </div> -->
                </div>
                <!-- second password -->
                <div v-if="isShowSecondPassword">
                    <el-input type="password" v-model="secondPassword" :id="`${new Date().getTime()}`" name="123465798" :autocomplete="`${new Date().getTime()}`"/>
                    <!-- <el-input type="password" v-model="secondPassword" :id="`${new Date().getTime()}`" name="123465798" :autocomplete="`new-password`"/> -->
                    <el-button @click="changeSecondPasswordType">{{ secondPasswordType === 'password' ? '显示' : '掩码' }}</el-button>
                </div>
            </el-form>
       </div>
       <el-button @click="isHidden('userID')">{{ isShowUserId ? '隐藏' : '显示' }} userID</el-button>
       <br />
       <el-button @click="isHidden('textPassword')">{{ isShowTextPassword ? '隐藏' : '显示' }} textPassword</el-button>
       <br />
       <el-button @click="isHidden('password')">{{ isShowPassword ? '隐藏' : '显示' }} password</el-button>
       <br />
       <el-button @click="isHidden('secondPassword')">{{ isShowSecondPassword ? '隐藏' : '显示' }} second password</el-button>
       <br />
       <br />
       <el-button @click="login">登录</el-button>
       <br />
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Autocomplete from './autocomplete.vue';
const router = useRouter()
const isShowUserId = ref<boolean>(true)
const isShowTextPassword = ref<boolean>(true)
const isShowPassword = ref<boolean>(true)
const isShowSecondPassword = ref<boolean>(true)
const regularText = ref<string>('')
const userId = ref<string>('')
const textPassword = ref<string>('123')
const password = ref<string>('123')
const secondPassword = ref<string>('')
const secondPasswordType = ref<string>('text')
const regularTextType = ref<string>('text')

const changeRegularText = () => {
    if(regularTextType.value === 'text') {
        regularTextType.value = 'password'
    } else if(regularTextType.value === 'password') {
        regularTextType.value = 'text'
    }
}

const changeSecondPasswordType = () => {
    if(secondPasswordType.value === 'text') {
        secondPasswordType.value = 'password'
    } else if(secondPasswordType.value === 'password') {
        secondPasswordType.value = 'text'
    }
}

const isHidden = (type: string) => {
    switch (type) {
        case 'userID': 
            isShowUserId.value = !isShowUserId.value
            break;
        case 'textPassword': 
            isShowTextPassword.value = !isShowTextPassword.value
            break;
        case 'password': 
            isShowPassword.value = !isShowPassword.value
            break;
        case 'secondPassword': 
            isShowSecondPassword.value = !isShowSecondPassword.value
            break;
        default:
            break;
    }
}

const login = () => {
    setTimeout(() => {
        router.push({name: 'login-success-page'})
    }, 100)
}
</script>

<style lang="scss" scoped>
:deep(.regular-text) {
    width: 20rem;
}
:deep(.regular-text.password) {
    .el-input__inner {
        -webkit-text-security: disc; /* Webkit浏览器 */
        text-security: disc;
    }
}
</style>